<template>
  <div>
    <Header></Header>
    <div class="mien">
      <img slot="img" src="../assets/img/header1.png" alt="">
      <div @click="openMinnev" class="minnev"><span><i class="el-icon-arrow-right"></i></span></div>
      <div class="nev">
        <div class="list-group">
          <router-link class="list-group-item active" to="/mien/copyRights">软著名单</router-link>
          <router-link class="list-group-item" to="/mien/projectAward">项目获奖</router-link>
          <router-link class="list-group-item" to="/mien/competition">学科竞赛获奖</router-link>
        </div>
      </div>
      <router-view></router-view>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
// import Header from '../components/Header'
// import Bottom from '../components/Bottom'
const Header = () => import('../components/Header')
const Bottom = () => import('../components/Bottom')
export default {
  name: "Mien",
  data() {
    return {
      minnev: false
    }
  },
  components: {
    Header,
    Bottom,
  },
  methods: {
    openMinnev() {
      this.minnev = !this.minnev
      if (this.minnev) {
        $(".minnev").css("left", 116)
        $(".nev").css("left", 0)
        $(".minnev i").removeClass().toggleClass("el-icon-arrow-left")
      } else {
        $(".minnev").css("left", 0)
        $(".nev").css("left", -116)
        $(".minnev i").removeClass().toggleClass("el-icon-arrow-right")
      }
    }
  }

}
</script>

<style lang="less" scoped>
.mien {
  margin-top: 45px;
  img {
    width: 100%;
    height: 25em;
  }
  .nev {
    z-index: 2;
    transition: all 0.4s ease-out 0s;

    position: fixed;
    top: 300px;
    max-width: 200px;
    .list-group a {
      text-align: center;
    }
  }

}
.minnev {
  z-index: 2;
  display: none;
  transition: all 0.4s ease-out 0s;
  border-radius: 0px 15px 15px 0;
  background-color: #337ab7;
  height: 41.5px;
  width: 160px;
  margin-left: -135px;
  top: 300px;
  position: fixed;
  line-height: 43px;

  span {
    color: white;
    font-size: 25px;
    margin-left: 135px;
  }
}

@media screen and (max-width: 850px) {
  .mien {
    margin-top: 0;
    img {
      height: 15em;
    }

  }
}
@media screen and (max-width: 1300px) {
  .nev {
    left: -116px;
  }
  .minnev {
    display: block;
  }
}
</style>
